<template>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        },
        chartData: {
            type: Object,
            default:function(){
                return {}
            }
        }
    },
    data () {
        return {
            chart: null,
            selfChartData: {
                currentVal: [],
                differVal: [],
                stepCols: []
            }
        }
    },
    mounted () {
        this.selfChartData = JSON.parse(JSON.stringify(this.chartData))
        this.initChart()
    },
    watch: {
        chartData (nVal) {
            this.selfChartData = JSON.parse(JSON.stringify(nVal))
            this.selfSetOption()
        }
    },
    beforeDestroy () {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart () {
            this.chart = echarts.init(document.getElementById(this.id));
            this.selfSetOption();
        },
        selfSetOption () {
            let currentVal = this.selfChartData.currentVal
            let differVal = this.selfChartData.differVal
            let currentRate = [],differRate  = []
            this.selfChartData.currentVal.forEach(cur =>{
                let cRate = (cur * 100 /this.selfChartData.currentVal[0]).toFixed(2)
                let dRate = (100 - cRate).toFixed(2)
                currentRate.push(cRate)
                differRate.push(dRate)
            })
            this.chart.setOption({
                backgroundColor: '#fff',
                title: {
                    //text: "统计",
                    textStyle: {
                        fontWeight: "bold",
                        fontSize: 18,
                        color: this.selfScss.titleColor,
                    },
                    left: "center",
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                grid: {
                    top: "5%",
                    left: "5%",
                    right: "5%",
                    bottom:"20%"
                },
                legend: {
                    bottom: "8%",
                    itemWidth: 15,
                    textStyle: {
                        color: "#67729d",
                    },
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#90979c'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0

                    },
                    data: this.selfChartData.stepCols
                }],
                yAxis: [{
                    type: 'value',
                    splitLine: {
                        show: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#90979c'
                        }
                    },
                    axisTick: {
                        show: true
                    },
                    axisLabel: {
                        show:true,
                        interval: 'auto',
                        formatter:'{value}%'
                    },
                    splitArea: {
                        show: true
                    }
                }],
                dataZoom: [{
                    show: true,
                    height: 15,
                    xAxisIndex: [
                        0
                    ],
                    bottom: 10,
                    start: 0,
                    end: 100,
                    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                    handleSize: '110%',
                    handleStyle: {
                        color: '#d3dee5'
                    },
                    borderColor: '#90979c'

                }, {
                    type: 'inside',
                    show: true,
                    height: 15,
                    start: 1,
                    end: 35
                }],
                series: [
                    {
                        name: '转化',
                        type: 'bar',
                        stack: 'total',
                        itemStyle: {
                            normal: {
                                color: 'rgba(77,174,245,1)',
                                barBorderRadius: 0,
                                label: {
                                    show: true,
                                    align:"center",
                                    fontSize:13,
                                    position: ['50%', '5%'],
                                    formatter (p) {
                                        let str = ""
                                        if(p.value > 0){
                                            str = p.value + "% \n"  + currentVal[p.dataIndex]
                                        }
                                        return str
                                    }
                                }
                            }
                        },
                        data: currentRate
                    },
                    {
                        name: '流失',
                        type: 'bar',
                        stack: 'total',
                        barMaxWidth: 60,
                        itemStyle: {
                            normal: {
                                color: 'rgba(255,216,184,0.8)',
                                label: {
                                    show: false,
                                    position: 'insideTop',
                                    formatter (p) {
                                        let str = ""
                                        if(p.value > 0){
                                            str = p.value + "% \n" + differVal[p.dataIndex]
                                        }
                                        return str
                                    }
                                }
                            }
                        },
                        data: differRate
                    }
                ]
            })
        }
    }
}
</script>
